<template>
  <div class="multi-device-container">
    <h1>多端访问</h1>
    <p>您可以通过以下设备访问：</p>

    <!-- 设备列表 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="device-card">
          <div class="device-icon">
            <i class="el-icon-mobile-phone"></i>
          </div>
          <h3>手机访问</h3>
          <p>使用手机浏览器扫描二维码，快速访问。</p>
          <el-button type="primary" @click="showQRCode('mobile')">
            生成二维码
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="device-card">
          <div class="device-icon">
            <i class="el-icon-monitor"></i>
          </div>
          <h3>电脑访问</h3>
          <p>在电脑浏览器中输入网址，轻松访问。</p>
          <el-button type="primary" @click="copyLink">
            复制链接
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="device-card">
          <div class="device-icon">
            <i class="el-icon-platform"></i>
          </div>
          <h3>平板访问</h3>
          <p>使用平板设备扫描二维码，便捷访问。</p>
          <el-button type="primary" @click="showQRCode('tablet')">
            生成二维码
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <!-- 二维码弹窗 -->
    <el-dialog
      title="扫描二维码"
      :visible.sync="qrCodeVisible"
      width="30%"
      center
    >
      <div class="qr-code-content">
        <img :src="qrCodeUrl" alt="QR Code" v-if="qrCodeUrl" />
        <p v-else>正在生成二维码...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 二维码弹窗的显示状态
const qrCodeVisible = ref(false);

// 二维码图片地址
const qrCodeUrl = ref('');

// 显示二维码
const showQRCode = (deviceType) => {
  qrCodeVisible.value = true;
  // 模拟生成二维码（实际项目中可以调用后端接口生成）
  qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/${deviceType}`;
};

// 复制链接
const copyLink = () => {
  const link = 'https://example.com';
  navigator.clipboard.writeText(link).then(() => {
    ElMessage.success('链接已复制到剪贴板！');
  });
};
</script>

<style scoped>
.multi-device-container {
  padding: 20px;
  text-align: center;
}

.device-card {
  margin-bottom: 20px;
}

.device-icon {
  font-size: 50px;
  margin-bottom: 10px;
  color: #409eff;
}

.qr-code-content {
  text-align: center;
}

.qr-code-content img {
  width: 150px;
  height: 150px;
}
</style>
